// 初始化所用的方法



// 这里存放一些因为要解决bug所以放在外面当作全局变量的值
let tableData = [];

let mineArea = $('.mineArea')

let flagNum = $(".flagnum")

let mineNumber = $(".minenum")
// 存储用户的插旗数据
 
let flagArray = [];





let btns = $$(".level>button");

// 储存地雷
let mineArray = null;
// _________________________________________________
// 生成地雷的方法
function initMine(){
    // 生成对应长度的数组
    let arr = new Array(curLevel.row * curLevel.col);
    // 填充
    for(let i = 0 ; i < arr.length ; i ++){
        arr[i]=i;
    }
    // 打乱数组
    arr.sort(()=> {return Math.random()*2 - 1} );
    // 截取
    return arr.slice(0,curLevel.mineNum);
}
// _____________________________________________________________


function clearScene(){
    mineArea.innerHTML = "";
    flagArray = [ ];
    flagNum.innerHTML = 0;
    mineNumber.innerHTML = curLevel.mineNum
}


function init(){


    // 清空上次的场景
    clearScene()

    // 随机生成地雷
    mineArray = initMine();
    console.log(mineArray);
    // 生成表格
    let table = document.createElement('table');
    // 初始化格子下标
    let index = 0;
    let mineArea = $('.mineArea')


    // 存储格子的额外信息
    // let tableData = [];

    for(let i = 0 ; i < curLevel.row;i ++){

        let tr = document.createElement('tr');
        tableData[i] = []

        for(let j = 0 ; j< curLevel.col;j ++){
            
            let td = document.createElement('td');
            let div = document.createElement('div');

            tableData[i][j] = {
                row : i,
                col: j,
                type: "number",
                value : 0,
                index ,
                checked : false , 
            }
            // 为div添加id
            div.dataset.id = index;
            // 标记是否可以插旗
            div.classList.add('canFlag');
            //  查看当前格子是否有雷
            if(mineArray.includes(tableData[i][j].index)){
                tableData[i][j].type = "mine";
                div.classList.add("mine")
            }

            td.appendChild(div);
            tr.appendChild(td);

            index++;
        }
        table.appendChild(tr);
    }
    // console.log(table);
    mineArea.appendChild(table)
    console.log(tableData);


    // 每次初始化完成之后绑定一次鼠标事件
    mineArea.onmousedown = function (e) {
        if (e.button === 0) {
            //说明用户点击的是鼠标左键，进行区域搜索操作
            searchArea(e.target)
        }
        if (e.button === 2) {
            //说明用户按的是鼠标右键，进行插旗
            flag(e.target)
        }
    }
    
}
// __________________________________________________________________________



// 这里是显示答案所需要的函数
function showAnswer(){
    let mineArr = $$("td>div.mine");

    let isAllRight = true;

    for (let i = 0 ; i < mineArr.length ; i ++){
        mineArr[i].style.opacity = 1;
    }

    for(let i = 0 ; i < flagArray.length ; i ++){
        if(flagArray[i].classList.contains("mine")){
            console.log(flagArray[i]);
            flagArray[i].classList.add("right");
        }else{
            flagArray[i].classList.add("error");
            isAllRight = false;
        }
    }
    if(!isAllRight || flagArray.length !== curLevel.mineNum ){
        gameOver(false)

    }

    mineArea.onmousedown = null ;

}


// 找到对应js对象
 function getTableItem(cell){
    let index = cell.dataset.id;
    let flatTableData = tableData.flat();
    return  flatTableData.filter(item => item.index == index)[0];
 }

// 返回边界
function getBound(obj){

    let rowTop = obj.row - 1 < 0 ? 0 : obj.row - 1;
    let rowButtom = obj.row + 1 === curLevel.row ? curLevel.row-1 : obj.row + 1;
    let colLeft = obj.col - 1 < 0 ? 0 : obj.col - 1;
    let colRight = obj.col + 1 === curLevel.col ? curLevel.col-1 : obj.col + 1;

    return {
        rowTop,
        rowButtom,
        colLeft,
        colRight,
    };


}


 // 查看周围一圈是否有雷的函数
function findMineNum(obj){
    // console.log(obj);

    let count = 0 ; //统计地雷的数量的参数

    let {rowTop,rowButtom,colLeft,colRight} = getBound(obj);

    console.log(getBound(obj));
    
    for(let i = rowTop ; i <= rowButtom ; i ++){
        for(let j = colLeft ; j <= colRight ; j ++){
            if(tableData[i][j].type === "mine" ){
                count ++
            }
        }
    }
    return count;
}



// 根据js对象返回对应的div用于区域搜索
function getDOM(obj) {
    let divArray = $$("td>div");
    return divArray[obj.index];
}



// 搜索附近单元格有没有雷（大雷）
function getAround(cell){

    if(!cell.classList.contains("flag")){


        cell.parentNode.style.border = "none";
    cell.classList.remove("canFlag");

    // 通过函数获取该元素在tableData里面所对应的对象
    let tableItem = getTableItem(cell); 
    // console.log(tableItem);
    // console.log(tableItem);

    // 如果点击的不是div就跳出函数
    if(!tableItem){
        return
    }
    // 标记已经检查过了
    
    tableItem.checked = true
    // 查看直接周围一圈是否有雷
    let mineNum = findMineNum(tableItem);

    // console.log(mineNum);
    if(!mineNum){

      let {rowTop , rowButtom ,colLeft , colRight} = getBound(tableItem);
      for (let i = rowTop ; i <= rowButtom ; i ++ ){
        for(let j = colLeft ; j <=colRight ; j ++){
            
            if(!tableData[i][j].checked){
                // tableData[i][j].checked = true ;
                getAround(getDOM(tableData[i][j]))
            }
            let p = getDOM(tableData[i][j])
            console.log(p)

        }
      }
      cell.classList.add("zero")

    }else{
        let cl = [
            "zero",
            "one",
            "two",
            "three",
            "four",
            "five",
            "six",
            "seven",
            "eight",
        ];
        cell.classList.add(cl[mineNum ] )
        cell.innerHTML = mineNum;
    }

    }

    
}



// 这里是区域搜索的函数——————————————
function searchArea (cell){
    //  如果踩雷了
    if(cell.classList.contains("mine")){
        cell.classList.add("error")
        // 显示答案
        showAnswer();
        // 失败，终止函数
        return;
    }

    // 如果没踩雷
    getAround(cell)



}

// —————————————————————————————————————————————————————————————————————————————————————————

function isWin(){
    for(let i = 0 ; i < flagArray.length ; i ++){
        if(!flagArray[i].classList.contains("mine")){
            return false;
        }
    }
    return true;
}


function gameOver(isWin){
    let mess = "";
    if(isWin){
        mess = "游戏胜利，你找除了所有的雷";
    }else{
        mess = "游戏失败";
    }
    setTimeout(function(){
        window.alert(mess);

    },20)
}





// 这里是插旗的函数————————————
function flag (cell){

    if( cell.classList.contains("canFlag") ){
        if(!flagArray.includes(cell)){
            flagArray.push(cell);
            cell.classList.add("flag");

            if(flagArray.length === curLevel.mineNum){
                if(isWin()){
                    gameOver(true);

                }
                showAnswer()
            }

        }else{

            let index = flagArray.indexOf(cell);
            flagArray.splice(index,1);
            cell.classList.remove("flag")


        }
        flagNum.innerHTML = flagArray.length;

    }


}

// 绑定事件
function bindEvent(){
    // let mineArea = document.querySelector('.mineArea')
    
    // mineArea.addEventListener('mousedown',function(e){
    //     // console.log(e.button);
    //     if ( e.button == 0  ){
    //         searchArea(e.target);
    //     }
    //     if(e.button == 2){
    //         flag(e.target);
    //     }
    // })

    mineArea.oncontextmenu = function(e){
        e.preventDefault();
    }

    // 游戏难度的选择
    $(".level").onclick = function (e){
        for (let i = 0 ; i < btns.length ; i ++) {
            btns[i].classList.remove("active")
        }
        e.target.classList.add("active");
        switch(e.target.innerHTML){
            case "初级":{
                curLevel = config.easy;
                break;
            }
            case "中级":{
                curLevel = config.normal;
                break;
            }
            case "高级":{
                curLevel = config.hard;
                break;
            }
        }
        init()
    }




}


// 主方法 
function main(){

    init();

    bindEvent();

}

main()